<style scoped>

</style>
<template>
  <!--页面主体，内容区域-->
  <div class="content">
    <div class="body">
      <div class="frame">
        <div class="myReagentArea">
          <mu-container style="min-width: 99% !important;">
            <mu-card id="myCard" style="width: 100%;  margin: 0 auto;border-radius:10px !important">
              <mu-card-title title="库存明细" sub-title=""></mu-card-title>
              <mu-card-text>
                <mu-container>
                  <mu-paper :z-depth="1" style="width:100% !important;overflow-x:scroll !important">
                    <mu-data-table border  id="myDataTable" :style="{width:getTableWidth().toString()+'px'}"  selectable  select-all :selects.sync="selects" :columns="columns"
                      :sort.sync="sort" @fit="false" @sort-change="handleSortChange" :data="list">
                      <template slot-scope="scope">
                        <td>{{scope.row.Remark5}}</td>
                        <td class="is-center">{{scope.row.BarCode}}</td>
                        <td class="is-center">{{scope.row.Name}}</td>
                        <td class="is-center">{{scope.row.ClientCode+'号柜'+scope.row.Place}}</td>
                        <td class="is-center">{{scope.row.EnglishName}}</td>
                        <td class="is-center">{{scope.row.CASNumber}}</td>
                        <td class="is-center">{{scope.row.Purity}}</td>
                        <td class="is-center">{{scope.row.Remain}}</td>
                        <td class="is-center">{{scope.row.Price}}</td>
                        <td class="is-center">{{scope.row.Status | format_status}}</td>
                        <td class="is-center">{{scope.row.ProductionDate}}</td>
                        <td class="is-center">{{scope.row.ExpirationDate}}</td>
                        <td class="is-center">{{scope.row.ShelfLife}} (天)</td>
                        <td class="is-center">{{scope.row.IsSupervise?'是': '否'}}</td>
                        <td class="is-center">{{scope.row.Manufacturer}}</td>
                        <td class="is-center">{{scope.row.Distributor}}</td>
                      </template>
                    </mu-data-table>
                  </mu-paper>
                </mu-container>
                <mu-container style="min-width: 100% !important">
                  <mu-flex style="margin: 20px 0;">
                    <mu-pagination id="myDrugPage" raised :total="totalCount" @change="drugDetailPageChange"
                      :page-size="pageSize" :page-count="15" :current.sync="current"></mu-pagination>
                  </mu-flex>
                </mu-container>
              </mu-card-text>
            </mu-card>
          </mu-container>
        </div>
        <button class="btn btn-danger btn-lg list-btn-bottom-right" style="left: 680px !important" @click="btnExport" type="button">导出</button>
        <button class="btn btn-danger btn-lg list-btn-bottom-right" @click="btnBackClickEvent" type="button">返回</button>
      </div>
    </div>
  </div>

</template>
<script>
  export default {
    extends: extend,
    name: "stockDetailNew",
    data: function () {
      return {
        current: 1,
        pageSize: 13,
        totalCount: 0,
        selects: [],
        sort: {
          name: '',
          order: 'asc'
        },
        columns: [
          {
            title: '批次号',
            name: 'Remark5',
            width: '150px',
          },
          {
            title: '条码',
            width: '150px',
            name: 'BarCode',
            align:'center',
          },
          {
            title: '药剂名称',
            name: 'Name',
            width: '150px',
            align:'center',
          },
          {
            title: '存放位置',
            name: 'Place',
            width: '200px',
            align:'center',
          },
          {
            title: '药剂英文名',
            name: 'EnglishName',
            width: '200px',
            align:'center',
          },
          {
            title: 'CAS号',
            name: 'CASNumber',
            width: '160px',
            align:'center',
          },
          {
            title: '纯度',
            name: 'Purity',
            width: '150px',
            align:'center',
          },
          {
            title: '余量',
            name: 'Remain',
            width: '150px',
            align:'center',
          },
          {
            title: '价格（元）',
            name: 'Price',
            width: '160px',
            align:'center',
          },
          {
            title: '状态',
            name: 'Status',
            width: '100px',
            align:'center',
          },
          {
            title: '生产日期',
            name: 'ProductionDate',
            width: '200px',
            align:'center',
          },
          {
            title: '过期日期',
            name: 'ExpirationDate',
            width: '300px',
            align:'center',
          },
          {
            title: '保质期',
            name: 'ShelfLife',
            width: '150px',
            align:'center',
          },
          {
            title: '重点监管',
            name: 'IsSupervise',
            width: '150px',
            align:'center',
          },
          {
            title: '生产商',
            name: 'Manufacturer',
            width: '260px',
            align:'center',
          },
          {
            title: '经销商',
            name: 'Distributor',
            width: '260px',
            align:'center',
          }
        ],
        list: [],
        pageTitle: "库存明细",
        countDownTimerMax: 60,

      };
    },
    computed: {

    },
    methods: {
      handleSortChange({
        name,
        order
      }) {
        this.list = this.list.sort((a, b) => order === 'asc' ? a[name] - b[name] : b[name] - a[name]);
      },
      //自适应表格宽度
      getTableWidth:function(){
        var tableWidth=0;
        this.columns.forEach(function(value,index,data) {
          tableWidth+= parseInt(value.width.replace('px',''));
        });
        return tableWidth;

      },
      //移除选择
      removeSelect(selectIndex) {
        const index = this.selects.indexOf(selectIndex);
        this.selects.splice(index, 1);
      },
      //分页查询数据
      drugDetailPageChange: function () {

        this.layerIndex = layer.load(2);
        //获取报表数据
        P_Report.drugDetailReport(this.current, this.pageSize, JSON.stringify(this.$parent.currentInfo));

      },
      //获取数据回调
      drugDetailReportCallback: function (obj) {
        layer.close(this.layerIndex);
        this.totalCount = obj.data.totalCount;
        if (obj.status != 0) {
          this.$toast.error(obj.message);
        } else {
          this.list = obj.data.jsonData;
        }
      },
      downloadDrugShelfLifeReportCallback: function (obj) {
        layer.close(this.layerIndex);
        if (obj.status != 0) {
          this.$toast.error(obj.message);
        } else {
          this.$toast.info('导出成功！');
        }
      },
      btnExport:function(){
        this.layerIndex = layer.load(2);
        P_Report.downloadDrugShelfLifeReport();
      }

    },
    mounted: function () {
      this.drugDetailPageChange();

    }
  };
</script>